<template>
    <div>
        {{ info }}
        <h1>门店添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="info.ShopName"></td>
                </tr>
                <tr>
                    <td align="right">商户地址</td>
                    <td>
                        <select v-model="info.ShopAddres">
                            <option value="">请选择</option>
                            <option  v-for="itme in list.a"> {{ itme.Name }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店图片</td>
                    <td><input type="file" @change="imgs" >
                    <img :src="info.Img" width="100" height="100">
                </td>
                </tr>
                <tr>
                    <td align="right">客服电话</td>
                    <td><input type="text" v-model="info.Phone"></td>
                </tr>

                 <tr>
                    <td align="right">门店状态</td>
                    <td><input type="radio" name="datas" v-model="info.State" :value="true">启用
                        <input type="radio" name="datas" v-model="info.State" :value="false">禁用
                    </td>
                </tr>
                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                        <textarea v-model="info.ShopJS"></textarea>
                    </td>
                </tr>
                 <tr>
                    <td align="right">入住须知</td>
                    <td>
                        <textarea v-model="info.ShopRZXZ"></textarea>
                    </td>
                </tr>
                 <tr>
                    <td align="right">交通信息</td>
                    <td>
                        <textarea v-model="info.JTXX"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type='button' value="添加" class="btn btn-primary" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const rouder=useRouter();

let info:any=reactive({
  ShopName: '',
  ShopAddres:'',
  Img: '',
  Phone: '',
  State: true,
  ShopJS: '',
  ShopRZXZ: '',
  JTXX: ''
})

let list:any=reactive({
    a:[]
})


const imgs=(e:any)=>{
let obj=e.target.files[0];
let f =new FormData();
f.append('file',obj);
axios({
    url:'/api/Shop/Img',
    method:'post',
    data:f
})
.then((res)=>{
    console.log(res);
    info.Img=res.data
    
})
.catch((err)=>{
    console.log(err);
    
})
}


onMounted(()=>{
    getlist();
})
const getlist=()=>{
    axios({
        url:'/api/Shop/GetShop',
        method:'get'
    })
    .then((res)=>{
        console.log(res);
        list.a=res.data;
    })
    .catch((err)=>{
        console.log(err);
        
    })

}



const ok=()=>{
    axios({
        url:'/api/Shop/AddShop',
        method:'post',
        data:info
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1)
    {
        alert('门店名称重复');
        return;
    }
    if(res.data>0)
    {
        alert('添加成功');
        rouder.push("/shopshow")
        
        return;
    }
    else
    {
        alert('添加失败');
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
        
    })
}
</script>

<style scoped>

</style>